import React from 'react'
// Outlet决定了嵌套路由组件渲染的位置
import { Link, Outlet, NavLink } from 'react-router-dom'
export default function Home() {
  return (
    <div>
      <h1>Home</h1>
      <NavLink
        to="/home/test1"
        className={({ isActive }) => {
          // 当浏览器地址栏的路径变化,这个回调触发
          // console.log('test1', obj)
          return isActive ? 'done' : ''
        }}
      >
        test1
      </NavLink>
      &nbsp;
      <NavLink
        to="/home/test2"
        // className={({ isActive }) => {
        //   // 当浏览器地址栏的路径变化,这个回调触发
        //   // console.log('test2', obj)
        //   return isActive ? 'done' : ''
        // }}
        style={({ isActive }) => {
          return isActive ? { color: 'hotpink', fontSize: 38 } : null
        }}
      >
        test2
      </NavLink>
      <hr />
      <Outlet></Outlet>
      <hr />
    </div>
  )
}
